<template>
	<view class="product-manage">
		<view class="product-manage-tabs">
			<tabs :list="tabs" v-model="active" :flex="true" @input="select"></tabs>
		</view>
		<scroll-view class="product-manage-view" scroll-y @scrolltolower="loadMore">
			<view class="product-manage-list" v-if="productList.length">
				<view class="product-manage-item" v-for="(data,index) in productList" :key="index">
					<image class="product-img" :src="data.image_middle" mode="aspectFill"></image>
					<view class="product-manage-info">
						<view class="product-manage-info-tit">{{data.goods_name}}</view>
						<view class="product-manage-info-text">零售价：¥{{data.retail_price}}</view>
						<view class="product-manage-info-text">成本价：¥{{data.self_price}}</view>
						<view class="product-manage-info-text"><text>人气：<text>{{data.click}}</text></text></view>
					</view>
				</view>
			</view>
			<nothing :text="active==1?'没有已下架的商品':'没有出售中的商品'" :btnTxt="'去添加'" :btn="active==1?false:true" @goUrl="goAdd" v-else></nothing>
			<no-more :text="'数据加载完毕'" v-if="productList.length && noMore"></no-more>
		</scroll-view>
		<view class="product-manage-bottom">
			<view @click="goAdd">添加商品</view>
			<view @click="batchManage" v-if="productList.length">批量管理</view>
		</view>
		
		<uni-popup ref="selectPro" type="bottom" class="selectProItem">
			<view class="search-bar">
				<uni-search-bar @confirm="search" @input="input" :radius="100" cancelButton="always" @cancel="cancel"></uni-search-bar>
			</view>
			<scroll-view scroll-y class="selectView" @scrolltolower="loadMorePro">
				<checkbox-group @change="change" v-if="ProList.length">
					<view class="proList-item" v-for="(data,index) in ProList" :key="index">
						<label>
							<checkbox :value="(data.goods_id).toString()" :checked="data.checked" color="#FFF" />
							<image :src="data.image_middle"></image>
							<view class="proList-item-info">
								<view class="proList-item-info-tit">{{data.goods_name}}</view>
								<view class="proList-item-info-price">零售价：￥{{data.retail_price}}</view>
								<view class="proList-item-info-price">利润：￥{{data.profit}}</view>
								<view class="proList-item-info-counts">人气：{{data.click}}</view>
							</view>
						</label>
					</view>
				</checkbox-group>
				<nothing :text="'没有商品'" :btn="false" v-else></nothing>
				<no-more :text="'数据加载完毕'" v-if="ProList.length && noMorePro" style="padding-bottom: 20rpx;"></no-more>
			</scroll-view>
			<view class="all-chose">
				<checkbox-group @change="changeAll"><label><checkbox :checked="allChecked" color="#FFF"/>全选</label></checkbox-group>
				<view class="confim-add" @click="confirmAdd">确认添加</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noMore: false,
				page: 0,
				active: 0,
				productList: [],
				tabs: [{
					title: '出售中'
				},{
					title: '已下架'
				}],
				categoryID: '',
				isCategory: false,
				choseList: [],
				allChecked: false,
				proPage: 0,
				noMorePro: false,
				ProList: []
			};
		},
		onLoad(options) {
			if(options.type){
				this.categoryID = options.type
			}
		},
		onShow() {
			this.productList = []
			this.init()
		},
		methods: {
			// 弹窗商品列表
			goAdd(id){
				this.getProList()
				this.$refs.selectPro.open()
			},
			// 搜索商品
			search(e){
				this.getProList(0,e.value)
			},
			// 输入事件
			input(e){
				this.searchValue = e.value
			},
			// 获取商品列表
			getProList(page,keyword){
				if(keyword){
					this.ProList = []
				}
				let data = {
					limit: 30,
					page: page?page:0,
					order_by: 'add_time',
					asc: 1,
					class_id: this.categoryID?this.categoryID:'',
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					keyword: keyword?keyword:''
				}
				this.$api.CaseGoodsList(data).then(res => {
					if(res.datas.length){
						res.datas.forEach(item => {
							this.ProList.push(item)
						})
					}else{
						this.noMorePro = true
					}
				})
			},
			// 加载更多商品
			loadMorePro(){
				if(!this.noMorePro){
					this.proPage++
					this.getProList(this.proPage,this.searchValue)
				}
			},
			// 取消搜索
			cancel(){
				this.$refs.selectPro.close()
			},
			// 选择商品
			change(e){
				let _this = this
				var items = this.ProList,
						values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.goods_id.toString())){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			// 全选商品
			changeAll(e){
				if(e.detail.value.length){
					this.isAll = true
					this.ProList.forEach((item,index) => {
						this.$set(item,'checked',true)
					})
				}else{
					this.isAll = false
					this.ProList.forEach((item,index) => {
						this.$set(item,'checked',false)
					})
				}
			},
			// 确认选择添加商品
			confirmAdd(){
				let checked = 0
				this.ProList.forEach((item,index) => {
					if(item.checked){
						checked++
						this.choseList.push(item.goods_id)
					}
				})
				if(checked < 1){
					uni.showToast({
						icon: 'none',
						title: '请选择至少一个商品'
					})
					return
				}
				this.$api.PlatformAddGoods({
					platform_class_id: this.categoryID,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					goods_id: this.choseList.join(',')
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '添加成功',
						duration: 1500
					})
					setTimeout(() => {
						this.noMore = false
						this.noMorePro = false
						this.productList = []
						this.init()
						this.$refs.selectPro.close()
					},1500)
				})
			},
			
			init(page){
				let data = {
					limit: 10,
					page: page?page:0,
					platform_class_id: this.categoryID,
					status: this.active==0?1:2,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
				}
				this.$api.PlatformGoodsLists(data).then(res => {
					if(res.datas.length){
						res.datas.forEach(item => {
							this.productList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			select(e){
				this.page = 0
				this.noMore = false
				this.productList = []
				this.init()
			},
			goCategory(){
				uni.navigateTo({
					url: '/pages/platform-goods/platform-category'
				})
			},
			batchManage(){
				uni.navigateTo({
					url: '/pages/platform-goods/platform-batch-manage?type='+this.categoryID +'&status='+Number(this.active+1)
				})
			},
			loadMore(){
				if(!this.noMore){
					this.page++
					this.init(this.page)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/scss/product-manage.scss';
	.search-bar{
		border-top: solid 1px #EEE;
		border-bottom: solid 1px #EEE;
	}
	.product-manage-view{
		.product-manage-info-tit{
			height: 92rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}
	.selectView{
		position: absolute;
		top: 110rpx;
		bottom: 90rpx;
		.proList-item{
			padding: 20rpx;
			border-bottom: solid 1px #EEE;
			label{
				display: flex;
				align-items: center;
			}
			&:last-child{
				border-bottom: none;
			}
			image{
				width: 220rpx;
				height: 220rpx;
			}
			.proList-item-info{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				.proList-item-info-tit{
					font-size: 34rpx;
					height: 92rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.proList-item-info-price{
					font-size: 26rpx;
					color: #333;
					margin-top: 10rpx;
				}
				.proList-item-info-counts{
					font-size: 26rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
	}
	.all-chose{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 90rpx;
		right: 0;
		background-color: #FFF;
		display: flex;
		align-items: center;
		border-top: solid 1px #EEE;
		justify-content: space-between;
		padding: 0 20rpx;
		.confim-add{
			font-size: 34rpx;
			color: #2073F5;
		}
	}
</style>